import React from 'react';
import { messages } from 'share/common';
import 'styles/data-center/report/travel-report/components/cost-center-select-for-report/cost-center-select-for-report.scss';
import MultiSelectorV2 from "components/template/multi-selector"
import config from "config";

class FormTypeSelectorForReport extends React.Component {
  state = {
    searcherItem: {
      url: `${config.baseUrl}/api/custom/forms/by/setOfBooksId`,
      key: 'formOID',
      title: "formOID",
      label: 'formName'
    },
    extraParams: {
      setOfBooksId: "",
      formTypeList: [3001, 3002, 3003]
    },
    selectedData: [],
    visible: false,
  };

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    let { extraParams, searcherItem, selectedData } = this.state;
    searcherItem.title = nextProps.title;
    extraParams.setOfBooksId = nextProps.setOfBooksId;
    if (nextProps.setOfBooksId === null || !nextProps.value) {
      selectedData = []
    }

    this.setState({
      selectedData,
      searcherItem,
      extraParams
    })
  }

  handleCancel = () => {
    this.setState({
      selectedData: [],
    });
    this.props.onChange(undefined);
  };

  handleOk = (result) => {
    this.setState({
      selectedData: result
    }, () => {
      this.props.onChange(result.length ? result : undefined);
    })
  };

  render() {
    const { extraParams, searcherItem, selectedData } = this.state;
    let { setOfBooksId } = this.props;
    const { handleOk } = this;
    const placeholder = setOfBooksId ? messages('common.select')/*请选择*/ : messages('finance-7.key154')/*请先选择账套*/;
    return (
      <div className="cost-center-select-for-report">
        <div>
          <MultiSelectorV2
            showClear
            isShowSelectAll
            selectorItem={searcherItem}
            params={extraParams}
            placeholder={placeholder}
            disabled={!setOfBooksId}
            value={selectedData}
            onChange={handleOk}
          />
        </div>
      </div>
    );
  }

  static propTypes = {
    onChange: React.PropTypes.func.isRequired,// 点击确认之后的回调：返回结果
    title: React.PropTypes.any.isRequired,//字段标题
    setOfBooksId: React.PropTypes.any,//账套id，需要有账套id查询成本中心
  }

  static defaultProps = {
    title: "单据名称",//由外面传入
    setOfBooksId: null,
  }
}

export default FormTypeSelectorForReport;



